<template>
  <div class="card mb-2" :class="directionReverse ? reverseDirection : ''">
    <div class="card-header p-3 pt-2">
      <div
        class="icon icon-lg icon-shape shadow text-center border-radius-xl mt-n4 position-absolute"
        :class="`bg-gradient-${icon.background} shadow-${icon.background}`"
      >
        <i
          class="material-icons opacity-10"
          :class="icon.color"
          aria-hidden="true"
        >{{ icon.name }}</i>
      </div>
      <div class="pt-1" :class="isRTL ? 'text-start' : 'text-end'">
        <p class="text-lg mb-0 text-capitalize">{{ title.text }}</p>
        <!-- 动态过渡金额 -->
        <h3 class="mb-0">￥{{ formattedAnimatedValue }}</h3>
      </div>
    </div>
    <hr class="dark horizontal my-0" />
    <div class="card-footer p-3" :class="isRTL ? 'text-start' : 'text-end'">
      <p class="mb-0" v-html="detail"></p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MiniStatisticsCard',
  props: {
    title: {
      type: Object,
      required: true,
      default: () => ({
        text: '',
        value: 0,
      }),
    },
    detail: {
      type: String,
      default: '',
    },
    icon: {
      type: Object,
      required: true,
      default: () => ({
        name: 'paid',
        color: 'text-white',
        background: 'success',
      }),
    },
    directionReverse: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      reverseDirection: 'flex-row-reverse justify-content-between',
      animatedValue: 0, // 当前显示的过渡值
      targetValue: 0,   // 最终目标值
      transitionDuration: 1500, // 动画持续时间 ms
      intervalId: null, // 计时器ID
    }
  },
  computed: {
    isRTL() {
      // 假设你没有使用 Vuex，可以改成 this.$store.getters.isRTL
      return false
    },
    formattedAnimatedValue() {
      return this.formatNumber(this.animatedValue)
    },
  },
  watch: {
    'title.value': {
      immediate: true,
      handler(newValue) {
        const numericValue = parseFloat(newValue)
        if (!isNaN(numericValue)) {
          this.targetValue = numericValue
          this.startAnimation()
        }
      },
    },
  },
  methods: {
    formatNumber(num) {
      return num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    startAnimation() {
      if (this.intervalId) clearInterval(this.intervalId)

      const start = this.animatedValue
      const end = this.targetValue
      const duration = this.transitionDuration
      let startTime = null

      const step = (timestamp) => {
        if (!startTime) startTime = timestamp
        const progress = timestamp - startTime
        const percentage = Math.min(progress / duration, 1)

        // 线性插值
        this.animatedValue = start + (end - start) * percentage

        if (percentage < 1) {
          this.intervalId = requestAnimationFrame(step)
        } else {
          this.animatedValue = end
        }
      }

      this.intervalId = requestAnimationFrame(step)
    },
  },
  beforeDestroy() {
    if (this.intervalId) {
      cancelAnimationFrame(this.intervalId)
    }
  },
}
</script>